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J avaScript 


Part #1 


History 


e Originally developed by Branden Eich (Netscape), as 
LiveScript 


e Became a joint venture of Netscape and Sun in 1995, 
renamed J avaScript 
e Now standardized by the European Computer 
Manufacturers Association as ECMA-262 (also ISO 
16262 
e JavaScript and J ava are only related through syntax 
= JavaScript is dynamically typed 
» JavaScript's support for objects is very different 
e JavaScript for Web platform 
= Speed 
= Gadgets 
= Mashups 
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JavaScript Features - Crockford 


* Load and go delivery 
* Case sensitive 
* Loose typing (or dynamic typing) 
* Objects as general containers 
= root object is Object 
= add properties to object, clone objects 
= objects are accessed through references 
e Inheritance 
= extends keyword 
= Prototypal 
e Lambda 
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What tools you need to learn 


J avaScript 
e Same as HTML and CSS 
= At least for the moment 
e Text editor 
e Web browser 
e No need Web server 
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General Syntax 
° iil ci d iiis file 


e Embed JavaScript code 
<script type = "text/javaScript"» 


//-- JavaScript script - 


</script> 


e JavaScript comments: both ;; and ;« ... »/ 
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Hello World with JavaScript. 
N QN 


«html lang x J^ 
«head» NS h 
«title» Hello world </title> ] / <~ 

«meta charset - "utf-8" /» he o) 
</head> [^ ty 
<body> 


y 
<script> (QU ol 


document write shoo, SOEN 287!");}; 


</script> 
</body> 
</html> 


«) 
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Operations 


e Numeric operators ++, --, +, -, *, /, % 


" The Math Object provides floor, round, max, 
nin, trig functions, etc. 


m e.g., Math.cos (x) 
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b f ine Number Ob) ect 
V c 
BS» (AX VALUE, MIN VALUE, NaN, POSITIVE INFINITY, 


NEGATIVE INFINITY, PI 


* €.Q., Number.MAX VALUE 


* An arithmetic operation that creates,o C- 
a 4 EU 
overflow returns(uziy 5 Ww ON 


- nan IS not -- to any number, not even itself 
" Test for It with 1sNaN (x) 
e Number Object has the method, tostring 


SOEN 287: J avaScript Data Types 


String Operations 


* Operator: + Ng AOS 


* Coercion is used: X9 
= "Jan" + 2010 


" ]* "3 Ny 
* Explicit conversions e 


= Use the string and number constructors 
= Se tostring Method of numbers 
Use parseInt and parseFloat on string 
a SA "e 


war nu C - 


SOEN 287: J avaScript Data Types 


Gi 


+: both plus and string 
concatenation - be careful 


IF2F "brrds" ARI. rds. = 
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+: both plus and string 
concatenation 


12+ "pirds" 


* |f both operands are numbers: 
= + is addition 
¢ otherwise string concatenation. 
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+: both plus and string 
concatenation 


1+2+ "birds" 


¢ |f both operands are numbers: 
= + is addition 
e otherwise string concatenation. 
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+: both plus and string 
concatenation 


"mj" 4 "ow 
1+ " bird" 
1+2+ "birds" 


¢ |f both operands are numbers: 
= + is addition 
e otherwise string concatenation. 


eS. 
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+: both plus and string 
concatenation 


LZ "DLrds" 


¢ |f both operands are numbers: 
= + is addition 
e otherwise string concatenation. 


eS. 
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+: both plus and string 
concatenation 


" bird" 
1424 "birds" 


¢ |f both operands are numbers: 
= + is addition 
e otherwise string concatenation. 


eS. 
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+: both plus and string 
concatenation 


1+2+ "birds" 


¢ |f both operands are numbers: 
= + is addition 
e otherwise string concatenation. 
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+: both plus and string 
concatenation 


¢ |f both operands are numbers: 
= + is addition 
e otherwise string concatenation. 
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e What is the result of '$' 


A. $7 

B. $34 

C. error 

D. undefined 
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Question 


+3+4? 


"11" 


Other operators in this case? 


11 < 2 
"71" < 2 
11 < "2" 


< m 


11 < "bird" 
11 < 2+ “birds” 


Gi 
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Other oe In this case? 


11«2* 
WE < 2 C 
11 « "2" 
"11" < "on 


ii € 2+ "Dirds" 


"B s DU —N < 
2p, i 
° vail operand is anumber, and the other can be 
,<isa 


¢ |f one operand is a number, and the other cannot 
be converted to a number, false all the time. 


¢ |f the two operands are string, < is a string 
comparison 


20 


Other operators in this case? 


11 < 2 
"71" < 2 
11 < "2" 


"q1" < won 
QJ a TI 
Il € 2+ "birds" 


e |f one operand is a number, and the other can be 
converted to a number, « is a number comparison, 


« |f one operand is a number, and the other cannot 
be converted to a number, false all the time. 


e |f the two operands are string, < is a string 
comparison 


-— 
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Other operators in this case? 


11 < 2 
"71" < 2 
11 < "2" 


"q1" < won 
QJ a TI 
Il € 2+ "birds" 


e |f one operand is a number, and the other can be 
converted to a number, « is a number comparison, 


« |f one operand is a number, and the other cannot 
be converted to a number, false all the time. 


e |f the two operands are string, < is a string 
comparison 


-— 
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Other operators in this case? 


11 < 2 
"71" < 2 
11 < "2" 


"q1" < won 
QJ a TI 
Il € 2+ "birds" 


e |f one operand is a number, and the other can be 
converted to a number, « is a number comparison, 


« |f one operand is a number, and the other cannot 
be converted to a number, false all the time. 


e |f the two operands are string, < is a string 
comparison 
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Other operators in this case? 


11 < 2 
"71" < 2 
11 < "2" 


"q1" < won 
QJ a TI 
Il € 2+ "birds" 


e |f one operand is a number, and the other can be 
converted to a number, « is a number comparison, 


« |f one operand is a number, and the other cannot 
be converted to a number, false all the time. 


e |f the two operands are string, < is a string 
comparison 
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Other operators in this case? 


11 < 2 
"71" < 2 
11 < "2" 


"q1" < won 
QJ a TI 
Il € 2+ "birds" 


e |f one operand is a number, and the other can be 
converted to a number, « is a number comparison, 


« |f one operand is a number, and the other cannot 
be converted to a number, false all the time. 


e |f the two operands are string, < is a string 
comparison 
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Other operators in this case? 


11 < 2 
"71" < 2 
11 < "2" 


"q1" < won 
QJ a TI 
Il € 2+ "birds" 


e |f one operand is a number, and the other can be 
converted to a number, « is a number comparison, 


« |f one operand is a number, and the other cannot 
be converted to a number, false all the time. 


e |f the two operands are string, < is a string 
comparison 


-— 
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Question 


e What is the result of GEP 4 ? 
A. false U 
B. true \ "a Q C 


C. error (O^ OV Qv 
D. undefined \ 2 Ü ro 
TN 
xO A ^ vof 
N ke e^ 
qi 
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Other operators in this case? 


' = Ae 
d EN \ 
NSC VO Ve C^ 
ve -— Vol V0 NC FEN Wer \ye-/ 
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Other operators in this case? 


11 * 2 
"IM * 2 
11 * "on 


"1]" * Won 
11 9€ "2bird" 


¢ |f operands are numbers, or all can be 
converted to a number, * is a number 
multiply 

* |f one operand is a number, and the 
other cannot be converted to a number, 
NaN all the time. 
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Other operators in this case? 


11 s "2bird" 


* |f operands are numbers, or all can be 
converted to a number, * is a number 
multiply 

* |f one operand is a number, and the other 
cannot be converted to a number, NaN all 
the time. 
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Other operators in this case? 


11 s "2bird" 


* |f operands are numbers, or all can be 
converted to a number, * is a number 
multiply 

* |f one operand is a number, and the other 
cannot be converted to a number, NaN all 
the time. 
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Other operators in this case? 


11 s "2bird" 


* |f operands are numbers, or all can be 
converted to a number, * is a number 
multiply 

* |f one operand is a number, and the other 
cannot be converted to a number, NaN all 
the time. 
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Other operators in this case? 


11 s "2bird" 


* |f operands are numbers, or all can be 
converted to a number, * is a number 
multiply 

* |f one operand is a number, and the other 
cannot be converted to a number, NaN all 
the time. 
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Other operators in this case? 


11 s "2bird" 


* |f operands are numbers, or all can be 
converted to a number, * is a number 
multiply 

* |f one operand is a number, and the other 
cannot be converted to a number, NaN all 
the time. 
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Question 


e What is the result of (1*3) < 4 ? 
A. false | 


B. true 
C. error 1 A 
D. undefined ] | 


Cop vC ce” 
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string 


Sequence of 0 or more 16-bit characters 
No separate character type 
n praem are represented as strings with a length of 


¢ Strings are immutable (similar to J ava!) 


e Us to check if the values of the strings are 
the same (definitely not in J ava!) 


< String literals can use single or double quotes 
e String.length 
i String (value): returns string 


String (value): returns object 
= You can live wi 


Ny 


Sk g O0y onsi 
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UL 
¢ The following code prints e. cot 


var a — “Lad”? 
var b — HOS 
document.write(a--b); 


®) 

A. true © as 

B. false Byer 
C. error A 

\none 

D. undefined AME a A 


Ve a QQercos Aser 
&QNOMe Me A 
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String methods 


charAt 
concat 
indexOf 
lastlIndexOf 
match 
replace 
search 
slice 

split 
substring 
toLowerCase 
toUpperCase 
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Boolean 


Boolean values are true and taise 


0, -0, null, "", false, undefined, or NaN are 
considered faise 
"Q" IS true! 


the Boolean(value) function 


SOEN 287: J avaScript Data Types 39 


«| 


Question 


e What does the following code return? 


Boolean("false"); 


. A. true. 
B. false 
C. error 
D. undefined 
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The Date Object 


i The Date Object 
ae - returns a string of the date 


getDate - returns the day of the month 

getMonth - returns the month of the year (0 - 11) 

getpay - returns the day of the week (0 - 6) 

getFullyear - returns the year 

getTime - returns the number of milliseconds 
since January 1, 1970 

getHours = returns the hour (0 i 23) 

getMinutes - returns the minutes (0 - 59) 

getMilliseconds ~ returns the millisecond (0 = 999) 
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Screen Output & Keyboard Input 


e The model for the browser display window 
Is the window Object 


" The Window obj ect contains document obj ect 


* The document Object has a method, write, 
which dynamically creates content 
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Screen output 


e alert ("The sum is:"+sumt"\n") ; 

A The sum is: 42 

* http://www.w3schools.com/js/tryit.asp?ftilename=t 
ryjs alert 


° confirm("Do you want to continue?"); 


Microsoft Internet Explorer 


T Do you want to continue this download? 


.asp?filename-zt 
ryjs - confirm 
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Get input in a dialog box 


e prompt ("What is your name?", 
idi I 


Explorer User Prompt 


Script Prompt: 


What is your name? 
Cancel | 


c» Var: Qvo V9 9 SÉ ko Xe 


ae ESAS googie SRP 
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Control expressions 


{document.write ('yes'); } 
else {document.write('no');} 


{document.write ('yes'); } 
else {document .write('no');} 


e 0, -0, null, "", false, undefined, or NaN are 


considered faise E 
Uae Va WE 


"1 IS Vi € 
Vouk Ve o6 6o. 


VE Me 


—— 
€ 
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Equal and not equal 


and != can do type coercion 
and !== cannot do type coercion 
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Question 


var a 
var b 


"dos 

"L293 

if(a--b) {document.write ('yes') ;} 
else {document.write ('no');} 


e What Is the output? 
A. yes 
B. no 
C. error 
D. nothing 
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A) 


Question 


if (3!== "3") {document.write ('yes');} 
else {document .write('no');} 


e What Is the output? 
A. yes 
B. no 
C. error 
D. nothing 
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A) 


Question 


vara new String("123"); 
var b = new String("123"); 
if(a--b) (document.write('yes');] 


else (document.write('no!');] 


e What is the output? 
A. yes 
B. no 
C. error 
D. nothing 
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A Challenge Question 


String ("123")3 

var b new String ("123"); 

if (a==b) {document.write ('yes');} 
else {document.write('no');} 


Vara 


e What Is the output? 
A. yes 
B. no 
C. error 
D. nothing 
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The logic operators: ss and || 


° &&: 
If the first operand is truthy, 
return the second operand, 
else return the first operand 
° ||: 
If the first operand is truthy, 
return the first operand, 
else return the second operand 


var last = input | default_value; 
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The logic operators: : 


if the operand is truthy, 


return false, 


else return true 


aS Boolean(value), return 


false Of true. 
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The bitwise operators: 


Operator Description Example | Sameas Result Value 
& AND x-5&1 0101& 0001 1 
0001 
| OR x=5|1 0101 | 0101 5 
0001 
~ NOT Km e$ ~0101 1010 10 
d XOR x-5^1] 0101^ 0100 4 
0001 
<< Left shift x=5 << 0101 << |1010 10 
1 1 
>> Right shift x=5>> 0101>> £0010 2 
1 1 


http://www.w3schools.com/jsref/jsref operators.asp 
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Control Statements 
e Switch 


switch (expression) { 
case value 1: 
// value 1 statements 
case value 2: 
// value 2 statements 


[default: 
// default statements] 
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Control Statements 
* Loop 


" while 
" for 
"= do-while 
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